<template>
  <a-spin :spinning="confirmLoading">
    <a-form-model ref="ruForm" :model="ruleForm" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="运费规则名称" prop="name">
        <a-input v-model="ruleForm.name" placeholder="输入运费规则名称" />
      </a-form-model-item>

      <a-form-model-item label="计费方式" prop="type">
        <a-tooltip>
          <template slot="title">
            运费规则以按重计费为例：首重以内的商品运费按照首费计算，超过首重的部分，每满足一续重按照续费计算一次，不足一续重按照一续重计算。例如配置为：首重1kg，首费10元，续重2kg，续费20元，则商品在1kg以内为10元，超过1kg的部分，每2kg收费20元，不足2kg的部分按照2kg计算。按件计费同理。
          </template>
          <a-icon type="question-circle" style="margin-right:10px;" />
        </a-tooltip>
        <a-radio-group v-model="ruleForm.type">
          <a-radio :value="1">按重计费</a-radio>
          <a-radio :value="2">按件计费</a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="运费规则" prop="detail">
        <div class="detail-row" v-for="(item, index) in ruleForm.detail" :key="index">
          <div class="detail-row-t">
            <div style="flex:1;">
              <span style="color:#333333;font-weight:600;padding-left:8px;">{{ruleForm.type=='1'?'首重(克)':'首件(件)'}} ：</span>{{ item.first }} <span
                style="color:#333333;font-weight:600;padding-left:8px;">首费(元) ：</span>{{ item.firstPrice }} <span
                style="color:#333333;font-weight:600;padding-left:8px;">{{ruleForm.type=='1'?'续重(克)':'续件(件)'}}：</span>{{ item.second }} <span
                style="color:#333333;font-weight:600;padding-left:8px;">续费(元) ：</span>{{ item.secondPrice }}
            </div>
            <a-button type="text" @click="updateDetailRow(index)">修改条目</a-button>
            <a-button type="text" @click="delDetailRow(index)">删除条目</a-button>
          </div>
          <div class="detail-row-b">
            <span style="color:#333333;font-weight:600;padding-left:8px;">省份：</span>
            <span style="padding-left:5px;" v-for="(item1, index1) in item.provinceList" :key="index1">{{ item1.name }}</span>
          </div>
        </div>
        <div class="detail-add">
          <a-button @click="addDetailRow()">新增条目</a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
    <postage-detail-modal ref="modalForm" @ok="modalFormOk"></postage-detail-modal>
  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDate from '@/components/jeecg/JDate'
import PostageDetailModal from './PostageDetailModal'

export default {
  name: 'GmsPostageRulesForm',
  components: {
    JFormContainer,
    JDate,
    PostageDetailModal
  },
  props: {
    //流程表单data
    formData: {
      type: Object,
      default: () => { },
      required: false
    },
    //表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data () {
    return {
      ruleForm: {
        shopId: null,
        name: '',
        detail: [],
        type: '1'
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      rules: {
        name: [
          { required: true, message: '请输入规则名称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30个字符', trigger: 'blur' }
        ]
      },
      url: {
        add: "/mallBase/gmsPostageRules/add",
        edit: "/mallBase/gmsPostageRules/edit",
        queryById: "/mallBase/gmsPostageRules/queryById"
      }
    }
  },
  computed: {
    formDisabled () {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
  },
  created () {

  },
  methods: {
    add () {
      this.ruleForm = {
        shopId: null,
        name: '',
        detail: [],
        type: 1
      }
    },
    edit (record) {
      this.visible = true
      let ruleFormStr = Object.assign({}, record)
      if (ruleFormStr.detail) {
        ruleFormStr.detail = JSON.parse(ruleFormStr.detail)
      } else {
        ruleFormStr.detail = []
      }
      this.ruleForm = ruleFormStr
      this.loadData()
    },


    addDetailRow () {
      this.$refs.modalForm.title = '修改运费规则'
      this.$refs.modalForm.id = this.ruleForm.id
      this.$refs.modalForm.type = this.ruleForm.type
      this.$refs.modalForm.selectedList = this.ruleForm.detail
      this.$refs.modalForm.index = -1
      this.$refs.modalForm.add()
    },
    updateDetailRow (index) {
      this.$refs.modalForm.title = '新增运费规则'
      this.$refs.modalForm.id = this.ruleForm.id
      this.$refs.modalForm.type = this.ruleForm.type
      this.$refs.modalForm.index = index
      this.$refs.modalForm.ruleForm = this.ruleForm.detail[index]
      this.$refs.modalForm.selectedList = this.ruleForm.detail
      this.$refs.modalForm.update()
    },
    modalFormOk (data, index) {
      // 新增条目成功时
      if (index == -1) {
        this.ruleForm.detail.push(data)
      } else {
        this.$set(this.ruleForm.detail, index, data)
        // this.ruleForm.detail[index] = data
      }
    },
    delDetailRow (index) {
      let self = this

      self.$confirm({
        title: "确认删除",
        content: "确定要删除吗?",
        onOk: function () {
          self.ruleForm.detail.splice(index, 1)
        }
      })
    },

    submitForm () {
      const that = this
      that.$refs.ruForm.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.ruleForm.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign({}, that.ruleForm)
          formData.detail = JSON.stringify(formData.detail)
          console.log("表单提交数据", formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        } else {
          return
        }
      })
    },
  }
}
</script>
<style scoped>
.detail-row {
  padding: 10px;
  box-sizing: border-box;
  line-height: 36px;
  margin-bottom: 8px;
  border: solid 1px #eeeeee;
}
.detail-row-t {
  display: flex;
}
</style>